<template>
  <div class="hello">
<!--    <div class="tools" @click="minder.enable()">-->
<!--      <button @click="exportHandle(0)">导出png图片</button>-->
<!--      <button @click="exportHandle(1)">导出pdf格式</button>-->
<!--      <button @click="minder.execCommand('camera', minder.getRoot(), 600);">重新定位</button>-->
<!--      <button @click="minder.execCommand('zoomIn')">放大</button>-->
<!--      <button @click="minder.execCommand('zoomOut');">缩小</button>-->
<!--      <select @change="minder.execCommand('template', rootData.template);" v-model="rootData.template">-->
<!--        <option v-for="(item, index) in templateList" :key="index" :value="index">{{item}}</option>-->
<!--      </select>-->
<!--      <select @change="minder.execCommand('theme', rootData.theme);" v-model="rootData.theme">-->
<!--        <option v-for="(item, index) in themeList" :key="index" :value="index">{{item}}</option>-->
<!--      </select>-->
<!--    </div>-->
<!--    <div class="tabBar">-->
<!--      <button v-for="(item, index) in importDate" :key="index" :class="{active:navIndex == index}" @click="selectHandle(index)">{{item.data.text}}</button>-->
<!--    </div>-->
<!--    <BreadCrumbs :minder="minder"/>-->
    <div id="minder-container"></div>
  </div>
</template>

<script>
import '../../static/kityminder.min.css'
import '../../static/kity.min.js'
import '../../static/kityminder.core.js'
// import jsPDF from 'jspdf';
// import _ from 'lodash'
import BreadCrumbs from './BreadCrumbs/index'
export default {
  name: 'KityMinder',
  data () {
    return {
      minder: null,
      imgUrl:null,
      navIndex:0,
      rootData:{
        root:{},
        template:'default',
        theme:'snow'
      },
      idIndex:0,
      roadmapData:new Array(),
      templateList:{
        'default': '思维导图',
        'tianpan': '天盘图',
        'structure': '组织结构图',
        'filetree': '目录组织图',
        'right': '逻辑结构图',
        'fish-bone': '鱼骨头图'
      },
      themeList: {
					'classic': '脑图经典',
					'classic-compact': '紧凑经典',
					'snow': '温柔冷光',
					'snow-compact': '紧凑冷光',
					'fish': '鱼骨图',
					'wire': '线框',
					'fresh-red': '清新红',
					'fresh-soil': '泥土黄',
					'fresh-green': '文艺绿',
					'fresh-blue': '天空蓝',
					'fresh-purple': '浪漫紫',
					'fresh-pink': '脑残粉',
					'fresh-red-compat': '紧凑红',
					'fresh-soil-compat': '紧凑黄',
					'fresh-green-compat': '紧凑绿',
					'fresh-blue-compat': '紧凑蓝',
					'fresh-purple-compat': '紧凑紫',
					'fresh-pink-compat': '紧凑粉',
					'tianpan':'经典天盘',
					'tianpan-compact': '紧凑天盘'
				},
    }
  },
  props:{
    importData:{
      type:Array,
      default:() => []
    },
    template:'',
    theme:'',
    cmd: {}
  },
  watch:{
    importData(){
      this.navIndex = 0
      this.rootData.root = this.importData[0]
      this.rootData.theme = this.theme
      this.rootData.template = this.template
      console.log("vueKityminder watch:")
      console.log(this.rootData)
      this.minder.importJson(this.rootData)
    },
    cmd(val){
      console.log("recieved cmd:")
      console.log(val)
      if(val!= {}){
        if(val.cmd=="QuerySelect"){
          let state = this.minder.queryCommandState('AppendChildNode')
          console.log("查询到的状态值：")
          console.log(state)
          this.$emit('listenToQueryEvent',state)
        }
        else if(val.type=="single"){
          this.minder.execCommand(val.cmd)
        }
        else{
          if(val.cmd=="AppendChildNode"){
            this.minder.execCommand(val.cmd,val.data)
          }
          else{
            this.minder.execCommand(val.cmd,val.data)
          }
        }
        // let value=val.split('|')
        // if(value.length>1){
        //   if(value[0]=='QuerySelect'){
        //     let state = this.minder.queryCommandState('AppendChildNode')
        //     console.log("查询到的状态值：")
        //     console.log(state)
        //     this.$emit('listenToQueryEvent',state)
        //     console.log("传回了数据："+state)
        //   }
        //   else if(value[1]=="single"){
        //     this.minder.execCommand(value[0])
        //     console.log("执行了一个添加命令:"+value[0])
        //   }
        //   else{
        //     if(value[0]=="AppendChildNode"){
        //       this.minder.execCommand(value[0],{"text": value[2], "id": value[3]})
        //     }
        //     else{
        //       this.minder.execCommand(value[0],{"text": value[2]})
        //     }
        //     console.log("执行了一个添加命令:"+value[0])
        //   }
        // }
        // else
        //   this.minder.execCommand(value[0])
        // console.log(this.minder.data())
      }
    }
  },
  mounted() { this.initMinder() },
  methods:{
    initMinder() {
      this.minder = new kityminder.Minder({
        enableKeyReceiver: false
      });
      this.minder.renderTo('#minder-container');
      this.selectHandle(0)
      // this.minder.on('keypress',function (e){
      //   console.log(e)
      //   this.minder.execCommand('AppendChildNode','dddd')
      // })
      let _this=this
      // this.minder.on('dblclick',function (e){
      //   console.log(e)
      //   console.log("dblclick")
      //   // _this.minder.execCommand('ArrangeDown');
      //   _this.minder.execCommand('AppendChildNode', 'textOrData');
      //   _this.minder.execCommand('Hand')
      //   _this.minder.execCommand('ResetLayout')
      // })
      // this.minder.disable()afterExecCommand
      // this.minder.on('afterExecCommand',function (e){
      //   console.log("afterExecCommand:")
      //   console.log(e)
      //   // console.log(e.getImportData)
      // })
      // this.minder.on('beforeExecCommand',function (e){
      //   console.log('beforeExecCommand:')
      //   console.log(e)
      //   // console.log(e.getImportData)
      // })
      // this.minder.on('preExecCommand',function (e){
      //   console.log('preExecCommand:')
      //   console.log(e)
      //   // console.log(e.getImportData)
      // })
      this.minder.on('contentchange',function (e){
        // console.log('contentchange:')
        // console.log(e.minder._root)
        // let node=e.minder._root
        // _this.idIndex=0;完善
        // _this.roadmapData.length=0
        // let tagId=0
        // if(node.data.tagId)
        //   tagId=node.data.tagId
        // _this.roadmapData.push({'id':_this.idIndex,'text':node.data.text,'pid':-1,'tagId':tagId})
        // _this.getChild(node.children,node.data.id)
        // console.log(_this.roadmapData)
        // _this.$emit("listenToChildEvent", _this.roadmapData)
        _this.$emit("listenToChildEvent", e.minder._root)
      })
      this.minder.on('selectionchange',function (e){
        console.log(e.minder._selectedNodes)
          _this.$emit('listenToSelectionEvent',e.minder._selectedNodes)
      })
    },
    // getChild(children,parentId){
    //   if(children){
    //     for(let i=0;i<children.length;i++){
    //       // this.idIndex++;
    //       let tagId=0
    //       if(children[i].data.tagId)
    //         tagId=children[i].data.tagId
    //       this.roadmapData.push({'id':children[i].data.id,'text':children[i].data.text,'pid':parentId,'tagId':tagId})
    //       this.getChild(children[i].children,children[i].data.id)
    //     }
    //   }
    // },
    keyup(e){
      console.log(e)
    },
    exportHandle(n) {
      // if(n == 0){
      //   this.minder.exportData('png').then((content) => {
      //     const ele = document.createElement('a')
      //     const evt = document.createEvent('HTMLEvents')
      //     evt.initEvent("click", true, true)
      //     ele.download = this.rootData.root.data.text || '无标题'
      //     ele.href = content
      //     ele.click()
      //   })
      // }else if(n == 1) {
      //   this.minder.exportData('png').then((content) => {
      //     var doc = new jsPDF()
      //     doc.addImage(content, 'PNG', 0, 0, 0, 0);
      //     doc.save(`${this.rootData.root.data.text || '无标题'}.pdf`);
      //   })
      // }
    },
    selectHandle(index) {
      this.navIndex = index
      this.rootData.root = this.importData[index]
      this.rootData.theme = this.theme
      this.rootData.template = this.template
      console.log("vueKityminder selectHandle:")
      console.log(this.rootData)
      this.minder.importJson(this.rootData)
    }
  },
  components:{
    BreadCrumbs
  }
}
</script>

<style scoped>

.tabBar{
  position: fixed;
  top: 50%;
  right: 20px;
  transform: translate(0,-50%);
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.tabBar button {
  margin-bottom: 10px;
  cursor: pointer;
}

.active {
  background: red;
  outline: none;
}

.tools{
  position: fixed;
  top: 20px;
  right: 20px;
  color: red;
  z-index: 100;
}
  #minder-container{
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      overflow: hidden;
      z-index: 2;
  }
</style>
